<template>
<view class="container">
	 <view class="mine-container" >
		<view class="mine-detail">
			<view class="detail-box">
				<view class="mine-img">
					<image src="../../static/images/profile.jpg" mode=""></image>
				</view>
				<view class="mine-name">
					<view class="mine-name-top">
						<text>测试用户</text>
					</view>
					<view class="mine-name-bottom">
						<text>Tel：15100000001</text>
					</view>
				</view>
			</view>
			<view class="mine-enter">
				<text>点击提现</text>
				<image src="../../static/images/personal/enter.png" mode=""></image>
			</view>
		</view>
	 </view>
	 <view class="mine-message" >
	 	<view class="second-banner">
	 		<view class="second-item">
	 			<view class="item-num">
	 				<text>1500</text>
	 			</view>
	 			<view class="item-name">
	 				<text>总收益</text>
	 			</view>
	 		</view>
	 		<view class="second-item">
	 			<view class="item-num is-border">
	 				<text>1500</text>
	 			</view>
	 			<view class="item-name">
	 				<text>已提现</text>
	 			</view>
	 		</view>
	 		<view class="second-item">
	 			<view class="item-num" >
	 				<text>1500</text>
	 			</view>
	 			<view class="item-name">
	 				<text>总退款</text>
	 			</view>
	 		</view>
	 	</view>
	 	<view class="tool-banner">
	 		<view class="tool-item">
	 			<view class="tool-left">
	 				<view class="tool-image">
	 					<image src="../../static/images/personal/purse.png" mode=""></image>
	 				</view>
	 				<view class="left-item">
	 					<text>我的钱包</text>
	 				</view>
	 			</view>
	 			<view class="tool-left">
	 				<view class="tool-enter">
	 					<text>点击提现</text>
	 					<image  src="../../static/images/personal/enter.png" mode=""></image>
	 				</view>
	 			</view>
	 		</view>
	 		<view class="tool-item">
	 			<view class="tool-left">
	 				<view class="tool-image">
	 					<image src="../../static/images/personal/report.png" mode=""></image>
	 				</view>
	 				<view class="left-item">
	 					<text>我的报告</text>
	 				</view>
	 			</view>
	 			<view class="tool-left">
	 				<view class="tool-enter">
	 					<!-- <text>点击提现</text> -->
	 					<image src="../../static/images/personal/enter.png" mode=""></image>
	 				</view>
	 			</view>
	 		</view>
	 		<view class="tool-item">
	 			<view class="tool-left">
	 				<view class="tool-image">
	 					<image src="../../static/images/personal/up.png" mode=""></image>
	 				</view>
	 				<view class="left-item">
	 					<text>我要升级</text>
	 				</view>
	 			</view>
	 			<view class="tool-left">
	 				<view class="tool-enter">
	 					<text>升级身份</text>
	 					<image  src="../../static/images/personal/enter.png" mode=""></image>
	 				</view>
	 			</view>
	 		</view>
	 		<view class="tool-item">
	 			<view class="tool-left">
	 				<view class="tool-image">
	 					<image src="../../static/images/personal/purse.png" mode=""></image>
	 				</view>
	 				<view class="left-item">
	 					<text>邀请下级</text>
	 				</view>
	 			</view>
	 			<view class="tool-left">
	 				<view class="tool-enter">
	 					<text>提示文字</text>
	 					<image src="../../static/images/personal/enter.png" mode=""></image>
	 				</view>
	 			</view>
	 		</view>
	 	</view>
	 	<view class="tool-banner" >
	 		<view class="tool-item">
	 			<view class="tool-left">
	 				<view class="tool-image">
	 					<image src="../../static/images/personal/center.png" mode=""></image>
	 				</view>
	 				<view class="left-item">
	 					<text>客服中心</text>
	 				</view>
	 			</view>
	 			<view class="tool-left">
	 				<view class="tool-enter">
	 					<!-- <text>点击提现</text> -->
	 					<image src="../../static/images/personal/enter.png" mode=""></image>
	 				</view>
	 			</view>
	 		</view>
	 		<view class="tool-item">
	 			<view class="tool-left">
	 				<view class="tool-image">
	 					<image src="../../static/images/personal/data.png" mode=""></image>
	 				</view>
	 				<view class="left-item">
	 					<text>数据统计</text>
	 				</view>
	 			</view>
	 			<view class="tool-left">
	 				<view class="tool-enter">
	 					<!-- <text>点击提现</text> -->
	 					<image src="../../static/images/personal/enter.png" mode=""></image>
	 				</view>
	 			</view>
	 		</view>
	 		<view class="tool-item">
	 			<view class="tool-left">
	 				<view class="tool-image">
	 					<image src="../../static/images/personal/setting.png" mode=""></image>
	 				</view>
	 				<view class="left-item">
	 					<text>系统设置</text>
	 				</view>
	 			</view>
	 			<view class="tool-left">
	 				<view class="tool-enter">
	 					<text>文字提示</text>
	 					<image src="../../static/images/personal/enter.png" mode=""></image>
	 				</view>
	 			</view>
	 		</view>
	 		<view class="tool-item">
	 			<view class="tool-left">
	 				<view class="tool-image">
	 					<image src="../../static/images/personal/Lower.png" mode=""></image>
	 				</view>
	 				<view class="left-item">
	 					<text>关于我们</text>
	 				</view>
	 			</view>
	 			<view class="tool-left">
	 				<view class="tool-enter">
	 					<text>文字提示</text>
	 					<image src="../../static/images/personal/enter.png" mode=""></image>
	 				</view>
	 			</view>
	 		</view>
			<view class="tool-item">
				<view class="tool-left">
					<view class="tool-image">
						<image src="../../static/images/personal/outLogin.png" mode=""></image>
					</view>
					<view class="left-item">
						<text>退出登录</text>
					</view>
				</view>
				<view class="tool-left">
					<view class="tool-enter">
						<!-- <text>文字提示</text> -->
						<image src="../../static/images/personal/enter.png" mode=""></image>
					</view>
				</view>
			</view>
	 	</view>
	 </view>
</view>
</template>
<script>
	 export default {
	    computed: {
	      windowHeight() {
	        return uni.getSystemInfoSync().windowHeight - 50
	      }
	    },
	}
</script>

<style>
	page{
		height: 100%;
	}
	.uni-page-body{
		height: calc(100vh - 50px);
	}
	.container{
		width:100%;
		height: 100%;
		overflow: auto;
	}
	.mine-container{
		width: 100%;
		height: auto;
		padding: 0 3vw;
		padding-top: 20vw;
		background-image: url(../../static/images/personal/background.png);
		background-size: 100% 100%;
		padding-bottom: 3vw;
	}
	.mine-detail{
		width: 100%;
		height: 20vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.detail-box{
		display: flex;
		align-items: center;
		gap:5vw;
	}
	.mine-img{
		width: 20vw;
		height: 20vw;
		border-radius: 50%;
		overflow: hidden;
		border: 1px  solid #64CAFF;
	}
	.mine-img image{
		width: 100%;
		height: 100%;
	}
	.mine-name-top{
		font-size: 5vw;
		font-weight: bold;
	}
	.mine-name-bottom{
		font-size: 3vw;
		color:#fff;
		padding: .5vw 2vw;
		border-radius: 3vw;
		background: linear-gradient(to right, #55A8E9, #2667E8);
		margin-top: 3vw;
	}
	.mine-enter{
		display: flex;
		align-items: center;
		gap:2vw;
		font-size: 4vw;
		color:#333333;
	}
	.mine-enter image{
	  width: 1.3vw;
	 height: 2.4vw;
	 margin-top: .5vw;
	}
	.mine-message{
		width: 100%;
		height: 50vw;
		background-image: url(../../static/images/personal/inner.png);
		background-size: 100% 100%;
		padding:0 3vw;
		margin-bottom: 6vw;
	}
	.second-banner{
		 width: 92%;
		 height: 24vw;
		 margin: 0 auto;
		 background-size: 100% 100%;
		 background-repeat: no-repeat;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 color:#fff;
		 
	}
	.second-item{
		width: 30%;
		height: auto;
		text-align: center;
		font-size: 3.5vw;
		
	}
	.item-num{ 
		font-size: 6vw;
		font-weight: bold;
	}
	.item-name{
		margin-top:1vw;	
	}
	.is-border{
		position: relative;
	}
	.is-border ::after{
		content: "";
		width: 1px;
		height: 9vw;
		background-color: #fff;
		position: absolute;
		top: 1vw;
		left: 0;
	}
	.is-border ::before{
		content: "";
		width: 1px;
		height: 9vw;
		background-color: #fff;
		position: absolute;
		top: 1vw;
		right: 0;
	}
	.tool-banner{
		width: 100%;
		height: auto;
		background-color: #fff;
		margin-top: 4vw;
		border-radius: 3vw;
		padding:0 4vw;
	}
	.tool-item{
		padding: 4vw 0;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tool-left{
		display: flex;
		align-items: center;
		gap: 2vw;
	}
	.tool-image{
		width: 6vw;
		height: 6vw;
	}
	.tool-image  image{
		width: 100%;
		height: 100%;
	}
	.left-item{
		font-size: 4vw;
		font-weight: 500;
	}
	.tool-enter{
		display: flex;
		align-items: center;
		gap:2vw;
		font-size: 4vw;
		color:#666666;
	}
	.tool-enter image{
		width: 1.3vw;
		height: 2.4vw;
		margin-top: .5vw;
		
	}
	
</style>
